<template>
    <div class="toBeSeller">
        <el-dialog :close-on-click-modal="false" title="成为卖家" :visible.sync="visible" width="40%" :before-close="handleClose">
            <el-form 
                ref="sellerForm" 
                :model="form"
                :rules="rules" 
                status-icon 
                @keyup.enter.native="handleSeller"
            >
                <el-form-item prop="user_realName" label="姓名">
                    <el-input v-model="form.user_realName" placeholder="验证真实姓名"/>
                </el-form-item>
                <el-form-item prop="user_idNumber" label="身份证">
                    <el-input v-model="form.user_idNumber" placeholder="验证身份证号"/>
                </el-form-item>
                <el-form-item prop="user_bankCard" label="银行卡号">
                    <el-input v-model="form.user_bankCard" placeholder="验证您的银行卡号"/>
                </el-form-item>
                <el-form-item prop="shop_name" label="店铺名称">
                    <el-input v-model="form.shop_name" placeholder="输入你的店名"/>
                </el-form-item>
            </el-form>
        <template #footer>
            <div class="buttons">
            <el-button type="primary" @click="handleSeller">确 定</el-button>
            <el-button plain @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
    name:'' ,
    components: {},
    inject:['reload'],
    props: {
        visible: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.userInfo
        }),
    },
    data() {
        const check1 = (rule ,value, callback) => {
            if (value !== this.userInfo.user_realName) {
                return callback(new Error('与您的真实姓名不一致,请重试'));
            }else{
                callback();
            }
        };
        const check2 = (rule ,value, callback) => {
            if (value !== this.userInfo.user_idNumber) {
                return callback(new Error('与您的身份证不一致,请重试'));
            }else{
                callback();
            }
        };
        const check3 = (rule ,value, callback) => {
            if (value !== this.userInfo.user_bankCard) {
                return callback(new Error('与您的银行卡号不一致,请重试'));
            }else{
                callback();
            }
        };
        return {
            form: {
                user_realName: '',
                user_idNumber: '',
                user_bankCard: '',
                shop_name: ''
            },
            rules: {
                //数组里一个对象对应套规则(包括检验内容,提示语)
                user_realName: [
                    { required: true, message: '请输入您的姓名', trigger: 'change' },
                    { validator: check1, trigger: 'change' },
                ],
                user_idNumber: [
                    { required: true, message: '请输入您的身份证号', trigger: 'change' },
                    { validator: check2, trigger: 'change' },
                ],
                user_bankCard: [
                    { required: true, message: '请输入银行卡号', trigger: 'change' },
                    { validator: check3, trigger: 'change' },
                ],
                shop_name: [
                    { required: true, message: '请输入店铺名称', trigger: 'change' },
                    { min: 3, message: '长度在3到7之间', trigger: 'change' },
                    { max: 7, message: '长度在3到7之间', trigger: 'change' },
                ],
            },
        };
    },
    methods: {
        ...mapActions({
            fetchOpenShop: 'user/fetchOpenShop'
        }),
        clear(){
            Object.keys(this.form).forEach(key => {
                this.form[key] = '';
            })
        },
        handleClose () {
            this.$emit('close');
            this.clear();
        },
        handleSeller(){
            this.$refs.sellerForm.validate((valid) => {
                if(valid){
                    this.fetchOpenShop({
                        user_id: this.userInfo.user_id,
                        shop_name: this.form.shop_name,
                        user_shop: this.userInfo.user_realName ? 1 : 0, 
                        user_realName: this.userInfo.user_realName
                    });
                    this.handleClose();
                }else{
                    return false;
                }
            });
        },
    },
}
</script>
<style lang='scss' scoped>
</style>